<template>
  <HeaderNav></HeaderNav>
  <div class="container_updata">
    <div class="titbox">
      <div class="title">{{ $t('updatePage.title') }}</div>
      <div class="sub">{{ $t('updatePage.subtitle') }}</div>
    </div>
    <div class="updata_list">
      <div class="device_card" @click="handleUpdata(item)" v-for="(item,index) in updataList" :key="index">
        <div class="title">{{item.deviceName}}</div>
        <div class="pic_box">
          <img class="device_pic_img" :src="item.devicePic" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref ,onMounted } from "vue";
import HeaderNav from "./comps/HeaderNav.vue";
import { getUpdataJson } from "./utils/tools";
import { useRouter } from "vue-router";
const router = useRouter();
const updataList = ref([]);

const handleUpdata = (item) => {
  const path = `${item.deviceUpdateUrlPath}?type=${item.updataDeviceId}&layout=${item.layout}`
  router.push(path);
};
onMounted(async()=>{
    updataList.value = await getUpdataJson()
})
</script>

<style scoped>
.container_updata {
  color: #fff;
  display: flex;
  flex-direction: column;
}
.titbox {
  margin-top: 100px;
  text-align: center;
}
.titbox .title {
  font-size: 40px;
  font-weight: bold;
}
.sub {
  color: #999;
  margin-top: 10px;
}

/* card */
.updata_list {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 950px;
  gap: 50px;
  margin-top: 100px;
  margin-bottom: 100px;
}
.device_card {
  flex-shrink: 0;
  width: 280px;
  background-color: #242627;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 26px;
  cursor: pointer;
  border: 1px solid transparent;
}
.card_style_electron {
  background-color: #fff;
  color: #000;
}
.device_card:hover {
  border: 1px solid rgba(255, 80, 25, 1);
}
.title {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}
.pic_box {
  width: 90%;
  height: 200px;
  display: flex;
  justify-content: center;
}
.device_pic_img {
  height: 100%;
  object-fit: contain;
}
</style>
